<template>
  <section
    class="md-container"
    :class="{ fixHeight: edit }"
  >
    <!--:subfield="false"-->
    <!--:toolbars-flag="false"-->
    <!--:default-open="'preview'"-->

    <mavon-editor
      ref="md"
      v-model="md"
      v-loading="loading"
      element-loading-text="图片上传中"
      :box-shadow="false"
      :subfield="edit"
      :toolbars-flag="edit"
      :default-open="mode"
      class="mavon-editor"
      @save="$save"
      @imgAdd="$imgAdd"
    />
  </section>
</template>

<script>
import { debounce } from '~/assets/js/util'
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor)

export default {
  props: {
    mdStr: {
      type: String,
      default: () => (`
        ### 用 Markdown 编辑器写文章
        如果你还希望深入的学习 Markdown，可以参考这里[Markdown语法](https://www.appinn.com/markdown/)
        `)
    },
    mode: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      defaultOpen: '',
      md: '',
      loading: false
    }
  },
  computed: {
    edit() {
      return this.mode !== 'preview'
    }
  },
  watch: {
    mdStr: function (newVal) {
      this.md = newVal
    }
    // mode: function (newVal) {
    //   if (newVal === 'edit') {
    //     this.mode = true
    //   } else if (newVal === 'preview') {
    //     this.mode = false
    //   }
    // }
  },
  created() {
    // 阅读模式，直接赋值
    if (this.mode === 'preview') {
      this.md = this.mdStr
    }
  },
  mounted() {
    // 标签括号转义
    this.$refs.md.markdownIt.set({ html: false })
    // 如果原始md字符串中存在曾上传的图片， 则需要将对应<img>中的src替换为base64
    // this.$nextTick(() => {
    //   // $vm.$imgUpdateByUrl 详情见本页末尾
    //   this.$refs.md.$imgUpdateByUrl(0, str)
    // })
    // 自动保存
    const textarea = document.querySelector('.auto-textarea-input')
    textarea.addEventListener('keyup', debounce(this.$save, 1000))
  },
  destroyed() {
    const textarea = document.querySelector('.auto-textarea-input')
    textarea.removeEventListener('keyup', debounce(this.$save, 1000))
  },
  methods: {
    $save() {
      // 保存mdstr
      this.$emit('saveMd', this.md)
    },
    async $imgAdd(pos, $file) {
      this.loading = true
      // 将图片上传到服务器.
      try {
        const res = await this.$axios.$post('/api/upload/advertise', {
          base64Data: $file.miniurl
        })
        this.loading = false
        if (res.status === 200) {
          this.$refs.md.$img2Url(pos, res.data)
          // 保存mdstr
          this.$emit('saveMd', this.md)
        } else {
          this.$message.error(res.msg)
          this.$refs.md.$img2Url(pos, '上传失败，请重新上传')
        }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~assets/css/public";
  .fixHeight {
    height: calc(100vh - 72px);
  }
  .md-container {
    min-height: 300px;
    /deep/ .el-loading-mask {
      .el-loading-spinner {
        position: fixed;
        top: 50%;
      }
    }

    /deep/ .v-note-wrapper {
      min-height: 100%;
      .v-note-op {
        border: none;
        border-bottom: 1px solid $theme-color-border;
        .add-image-link-wrapper .add-image-link .op-btn.sure {
          background: $theme-color;
        }
        .op-icon {
          color: $theme-color;
          &.selected {
            color: $theme-color;
            background: $theme-color-background;
          }
        }
      }
      .v-note-panel {
        border: none;
        .v-note-edit {
          &,
          textarea {
            background: $theme-color-background;
          }
        }
        .v-show-content {
          background: none;
        }
      }
    }
  }
</style>
